import React, {useEffect, useState} from 'react';
import {Carousel, Collapse, message} from "antd";
import axios from "axios";
import cookie from "react-cookies";
import Cookies from "js-cookie";
import {useNavigate} from "react-router-dom";
import {ProxyConfigClass} from "../../../Util/Proxy";
const Index = () => {
    const [works,setWork] = useState([])
    const { Panel } = Collapse;
    const navigate = useNavigate();
    const contentStyle = {
        height: '160px',
        color: '#fff',
        lineHeight: '160px',
        textAlign: 'center',
        background: '#364d79',
    };
    const text = `
  A dog is a type of domesticated animal.
  Known for its loyalty and faithfulness,
  it can be found as a welcome guest in many households across the world.
`;
    useEffect(
        ()=>{
            axios.post(ProxyConfigClass.isProxy ? ProxyConfigClass.urlPrefix : ProxyConfigClass.isGoLongUrt +"/workManage/select",{},{
                headers: {
                    "Token": Cookies.get("Token")
                }
            }).then(function (response) {
                const res=response.data
                if (res.msg === "账号再其他地方登录请重新登录") {
                    message.warning("账号再其他地方登录请重新登录")
                    navigate("/hello")
                }else{
                    setWork(res.works.map(
                        t=>{
                            return {
                                id:t.Id,
                                remark:t.Remark,
                                title:t.Title
                            }
                        }
                    ))
                    console.log(works)


                }
            }).catch(function (error) {
                alert(error);
            });
        }
    ,[])
    const onChange = (key) => {
        console.log(key);
    };
    return (
        <div>
            <Carousel autoplay>
                {
                    works.map(t=>{
                        return ( <div>
                            <h3 style={contentStyle} key={t.id} >{t.title}</h3>
                            </div>
                        )
                    })
                }
            </Carousel>
            <Collapse defaultActiveKey={['1']} onChange={onChange}>
                    {
                        works.map(t=>{
                            return (

                                <Panel header={t.title} key={t.id}>
                                    <p>{t.remark}</p>
                                </Panel>
                            )
                        })
                    }
            </Collapse>
        </div>
    );
};

export default Index;
